<template style="background:#f5f6fa;">

  <div>
    <div class="typical-home">
      <a-spin :spinning="spinning" :delay="delayTime" tip="loading...">
        <!--        <a-row :gutter="[24, 24]" class="top-list">-->
        <div class="top-list">
          <a-col :span="8" style="height:223px;">
            <!--图片背景-->
            <div class="bg-mask">
              <div class="page-header-content">
                <!--                <div class="avatar">-->
                <!--                  <a-avatar size="large" :src="avatar"/>-->
                <!--                </div>-->
                <div class="content" style="top: 50%;left: 50%;transform: translate(-52%, 136%);" >
                  <div class="content-title" style="color: white;font-size: 32px;font-weight: bold;">
                    {{ timeFix }}，{{ nickname }}<span class="welcome-text"></span>
                  </div>
                  <div style="color: white;font-size: 18px;font-weight: bold;margin-top: 6px"> {{ postGroup }} | {{ user.dept.deptName }}</div>
                </div>
              </div>
            </div>
          </a-col>
          <a-col v-for="(item, index) in dataList" :key="index" :span="4">
            <a-card
              :bordered="true"
              :hoverable="true"
              @click="addTabMenu(item.path)"
              v-if="index<11"
              style="cursor: pointer;margin: 0 0 10px 10px">
              <a-icon
                :type="item.icon"
                :component="allIcon[item.icon + 'Icon']"
                :style="{ background: getMenuColor(index) }" />
              <span>{{ item.title }}</span>
            </a-card>
          </a-col>
        </div>

        <!--        </a-row>-->
      </a-spin>
    </div>
  </div>
</template>

<script>
import { timeFix } from '@/utils/util'
import allIcon from '@/core/icons'
import { mapGetters } from 'vuex'
import { getUserProfile } from '@/api/system/user'
export default {
  name: 'Workbench',
  props: {
    bannerType: {
      type: String,
      default: '1'
    }
  },
  data () {
    return {
      // 用户信息加载
      userInfoLoading: true,
      // 角色组
      roleGroup: {},
      // 岗位组
      postGroup: {},
      // 用户信息
      user: {
        dept: {
          deptName: ''
        }
      },
      timeFix: timeFix(),
      visible: false,
      spinning: false,
      delayTime: 100,
      dataList: [
        {
          path: '/system/user',
          icon: 'pound',
          title: '用户管理'
        },
        {
          path: '/system/dept',
          icon: 'lock',
          title: '部门管理'
        },
        {
          path: '/system/post',
          icon: 'unlock',
          title: '岗位管理'
        },
        {
          path: '/system/role',
          icon: 'book',
          title: '角色管理'
        },
        {
          path: '/monitor/druid',
          icon: 'calendar',
          title: '数据监控'
        },
        {
          path: '/tool/gen',
          icon: 'copy',
          title: '代码生成'
        },
        {
          path: '/log/operlog',
          icon: 'contacts',
          title: '操作日志'
        },
        {
          path: '/log/logininfor',
          icon: 'api',
          title: '登录日志'
        },
        {
          path: '/log/logininfor',
          icon: 'api',
          title: '登录日志'
        },
        {
          path: '/log/logininfor',
          icon: 'api',
          title: '登录日志'
        },
        {
          path: '/log/logininfor',
          icon: 'api',
          title: '登录日志'
        },
        {
          path: '/log/logininfor',
          icon: 'api',
          title: '登录日志'
        },
        {
          path: '/log/logininfor',
          icon: 'api',
          title: '登录日志'
        },
        {
          path: '/log/logininfor',
          icon: 'api',
          title: '登录日志'
        }
      ],
      changyongResultMenus: [], // 添加常用应用查询结果集合
      menus: [],
      sortable: undefined,
      buildMenus: [], // 重构菜单结构，用于首页显示
      activeChangyongTabKey: 'tab0',
      colorList: ['#5584fd', '#3470ff', '#ff8801', '#00d6b9', '#7e3bf3'],
      allIcon: allIcon
    }
  },
  computed: {
    ...mapGetters([
      'avatar',
      'nickname'
    ])
  },
  mounted () {
    this.getUser()
  },
  watch: {
  },
  created () {
  },
  methods: {
    // 获取用户信息
    getUser () {
      getUserProfile().then(response => {
        this.user = response.data
        this.roleGroup = response.roleGroup
        this.postGroup = response.postGroup
        console.log(this.userInfoLoading)
        this.userInfoLoading = false
        console.log(this.userInfoLoading)
      })
    },
    getMenuColor (index) {
      return this.colorList[index % 4]
    },
    addTabMenu (path) {
      this.$notification.open({
        message: '提示',
        description:
          '该功能暂未实现',
        icon: <a-icon type="smile" style="color: #108ee9" />
      })
      // this.$router.push({
      //   path: path
      // })
    }
  }
}
</script>
<style lang="less">
@import "../index.less";
@import './typical-home.less';
.ant-list-item-drag {
  background: #ffffff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
  box-sizing: border-box;
  z-index: 9999;
  border: 1px solid #dee0e3;
}
.common-iconbtn .anticon{
  margin: 0px 5px;
  color:rgba(0, 0, 0, 0.35);
  font-size: 16px;
}
.common-iconbtn .anticon-menu{
  cursor:move;
}
.bg-mask{
  width: 100%;
  height: 100%;
  background-image: url("~@/assets/images/avtarBg.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  //&:after{
  //  content: "";
  //  border-radius: inherit;
  //  width: 100%;
  //  height: 100%;
  //  display: block;
  //  background-color: rgba(0, 0, 0, 0.4);
  //  position: absolute;
  //  left: 0;
  //  right: 0;
  //  bottom: 0;
  //  top: 0;
  //  border-top-left-radius: inherit;
  //  border-top-right-radius: inherit;
  //  border-bottom-right-radius: inherit;
  //  border-bottom-left-radius: inherit;
  //}
}
</style>
